import React, {Component} from 'react'
import ReactDOM from 'react-dom';
import {Modal, Form, Row, Col, Input, Button} from 'antd';
import {ModalForm, ListBox} from '../../../components'
import {fetchData} from '../../../components/AjaxConsumer'
import store from '../../../stores'
const confirm = Modal.confirm;


export default class ListDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            resData: null,
            conditonData:{},
        };
        //行操作列表
        this.rowOperation = [
        ];

        //header 操作列表
        this.headerOperation = [
        //    {
        //        handleName: 'export',
        //        showName: 'Excel',
        //        iconClass: 'file-excel'
        //    }
        ];

        //table列表展示列配置
        //storageKey 本地存储的key
        //showName、columnName 必有属性， columnWidth 可选，默认100, columnHidden: true 列隐藏（用于列配置显示隐藏）, foreverHidden: true 列永久隐藏
        this.tableColumn = {
            storageKey: 'id',
            data: [
                {
                    showName: 'id',
                    columnName: 'id',
                    columnHidden:true,
                    foreverHidden: true
                },
                {
                    showName: '车辆登记单号',
                    columnName: 'userDefined2',
                    columnWidth: 110
                },
                // {
                //     showName: '采购订单号',
                //     columnName: 'purchaseNo'
                // },
                {
                    showName: '合同编号',
                    columnName: 'contractNo',
                    columnWidth: 120
                },
                {
                    showName: '条码',
                    columnName: 'barcode',
                    columnWidth: 130
                },
                {
                    showName: '型号',
                    columnName: 'model'
                },
                {
                    showName: '型号描述',
                    columnName: 'modelDesc',
                    columnWidth: 150
                },
                {
                    showName: '型号类型',
                    columnName: 'modelType'
                },
                {
                    showName: '供应商',
                    columnName: 'userDefined5'
                },
                {
                    showName: '数量',
                    columnName: 'amount',
                    columnWidth: 80
                },
                {
                    showName: '单位',
                    columnName: 'unit',
                    columnWidth: 80
                }, {
                    showName: '打印状态',
                    columnName: 'status',
                    showOption: [//页面显示配置
                        {
                            optionKey: '0',
                            optionShow: '未打印'
                        }, {
                            optionKey: '1',
                            optionShow: '已打印'
                        }
                    ],
                    columnWidth: 90
                }, {
                    showName: '入库状态',
                    columnName: 'userDefined1',
                    showOption: [//页面显示配置
                        {
                            optionKey: '0',
                            optionShow: '未入库'
                        }, {
                            optionKey: '1',
                            optionShow: '已入库'
                        }
                    ],
                    columnWidth: 90
                }
            ]
        };

        this.searchComponentData = [
            {
                showName: '数量',
                name:'amount',
                type: 'number',
                maxName:'amountMax', //最大值
                minName:'amountMin'  //最小值
            },
            {
                showName: '型号类型',
                name: 'modelType',
                type: 'select',
                optionList: [
                ]
            },
            {
                showName: '打印状态',
                name: 'status',
                type: 'select',
                optionList: [//下拉框的信息
                    //下拉框的信息
                    {
                        optionKey: '',
                        optionShow: ''
                    }, {
                        optionKey: '0',
                        optionShow: '未打印'
                    }, {
                        optionKey: '1',
                        optionShow: '已打印'
                    }
                ]
            },
            {
                showName: '入库状态',
                name: 'userDefined1',
                type: 'select',
                optionList: [//下拉框的信息
                    //下拉框的信息
                    {
                        optionKey: '',
                        optionShow: ''
                    }, {
                        optionKey: '0',
                        optionShow: '未入库'
                    }, {
                        optionKey: '1',
                        optionShow: '已入库'
                    }
                ]
            }
        ];
        this.formAlerSize = 'large'; //弹出框的大小 只有'large'和'small'两种值 （必须,输错时默认为large）
    }
    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    hideModal = () => {
        this.setState({
            visible: false,
        });
    };
    rowHandles = (strHandles, rowObj) => {
        //listBox组件内未做函数不存在的判断，需定义空函数
        if (strHandles == 'export') {
            this.exportXlsHandle(this.state.conditonData);
        }
    };
    //(外部调用) + '&materialCode=' + materialCode
    editHandle = (rowObj) => {
        //根据对象的Id 属性获取对象信息
        const checkInId = rowObj.checkInId;
        console.log("checkInId：", checkInId);
        this.setState({
            url: '/material/intowarehouse/barcode/list?userDefined3=' + checkInId,
            visible: true
        });
        this.setState({
            conditonData:{
                'checkInId':checkInId
            }
        },()=>{
            console.log(this.state.conditonData)
        });
    };

    exportXlsHandle =(conditonData) =>{
        console.log('-------导出条件--------',conditonData);
        let param ='?'
        for(let key in conditonData){
            if(conditonData[key]!=''){
                console.log(key,conditonData[key]);
                param = param + key + '=' + conditonData[key] + '&'
            }
        }
        console.log(param);
        window.location.href='/wmsrest/product/outnx/snlist/exp'+param;
    }

    handleOk = () => {
        this.hideModal();
    };

    handleCancel = () => {
        this.hideModal();
    };

    componentDidMount() {
        const dicType = 'model_type';
        const options= {
            url: '/base/dic/get/' + dicType,
            type: 'get',
            condition:{}
        };
        //先写死，后面再改
        fetchData(this, options, this.dicInitCallBackHandle);
    }

    //下拉框 初始化
    dicInitCallBackHandle = (resData)=>{
        //alert('resData' + JSON.stringify(resData, null, 4));
        let optionList = [];
        let tmp = {};
        tmp.optionKey = '';
        tmp.optionShow = '';
        optionList.push(tmp);
        resData.data.map( (e,index) => {
            let tmp = {};
            tmp.optionKey = e.dicCode;
            tmp.optionShow = e.dicName;
            optionList.push(tmp);
        });

        //alert('optionList' + JSON.stringify(optionList, null, 4));
        this.tableColumn.data[6].showOption = optionList;

        this.searchComponentData[1].optionList = optionList;
        //this.setState({
        //    tableColumn: this.tableColumn,
        //    searchComponentData: this.searchComponentData
        //})

    }

    render() {
        let isHideLeft = this.props.isHideLeft;
        return(
            <Modal
                style={{top:'20px'}}
                visible={this.state.visible}
                title={'车辆登记条码详情'}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={'1200px'}
                key={Math.random()}
                footer={[
                    <Button key="back" type='primary' size="large" onClick={this.handleCancel}>返回</Button>,
                ]}
            >

                <ListBox
                    ref = 'listNxOutDeatail'
                    isHideLeft={isHideLeft}
                    tableColumnData = {this.tableColumn}
                    searchComponentData={this.searchComponentData}
                    url = {this.state.url}
                    rowHandles = {this.rowHandles}
                    rowOperation = {this.rowOperation}
                    headerOperation = {this.headerOperation}
                    isRowSingle={true}
                />

            </Modal>
        )
    }
}